<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>妙味课堂——带你享受极富人情味的IT培训体验 CSS、JavaScript、JQuery培训</title>
<meta name="robots" content="all" />
<meta name="author" content="miaov.com" />
<meta name="copyright" content="miaov.com" />
<meta name="description" content="北京妙味课堂是提供CSS、JavaScript、JQuery等IT课程培训的机构，专门针对初学者推出极富人情味的一对一家教式精品课程，所有课程均不限课时、学会为止，结业后学员也能享受长年的免费咨询服务，咨询QQ：20907961，手机：13141414820" />
<meta name="keywords" content="CSS培训, JavaScript培训, css课程, JavaScript课程, CSS精品课程, JavaScript精品课程, 北京CSS培训, 北京JavaScript培训, 网页制作培训, 网页特效培训, css家教, JavaScript家教, 北京css家教, 北京JavaScript家教, JQuery课程, JQuery培训, JQuery精品课程, 北京JQuery培训" />
<meta name="revised" content="miaov.com, 2009/11/11/" />
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
window.frictionFactor = 0.8;
window.timeSpan = 10;
window.timeInterval = 30;
window.iSpeed = 20;
window.onload = function(){
	var oHeaderDiv = document.getElementById('header');
	var oUlArr = oHeaderDiv.getElementsByTagName('ul');
	var oUlForward = oUlArr[0];
	var oUlBackground = oUlArr[1];
	var oLiForwardArr = oUlForward.getElementsByTagName('li');
	var oLiBackgroundArr = oUlBackground.getElementsByTagName('li');
	var oBtnBgDiv = document.getElementById('btn_bg');
	window.bgBtnStartPos = 432;
	window.bgUlStartPos = 2;
	window.bgBtnWidth = oBtnBgDiv.offsetWidth;
	for(var i=0; i<oLiForwardArr.length; i++){
		oLiForwardArr[i].index = i;
		oLiForwardArr[i].onmouseover = function(){
			var objArr = [];
			objArr.push(oBtnBgDiv);
			objArr.push(oUlBackground);
			oBtnBgDiv.iTarget = getBgDivLeft(this.index);
			oUlBackground.iTarget = getBgUlLeft(this.index);
			for(var i=0; i<objArr.length; i++){
				objArr[i].iSpeed = window.iSpeed * (objArr[i].iTarget > parseInt(objArr[i].style.left)? 1 : -1);
			}
			var attr = 'left';
			startMove(objArr,attr);
		};
	}
	for(var i=0; i<oLiBackgroundArr.length; i++){
		oLiBackgroundArr[i].index = i;
	}
}

function getBgDivLeft(iTargetIndex){
	return iTargetIndex * bgBtnWidth + bgBtnStartPos;
}

function getBgUlLeft(iTargetIndex){
	return -iTargetIndex * bgBtnWidth + bgUlStartPos;
}

function startMove(objArr, attr){
	clearInterval(objArr[0].timer);
	objArr[0].timer = setInterval(function(){
		doMove(objArr, attr);
	}, window.timeInterval);
}

function doMove(objArr, attr){
	for(var i=0; i<objArr.length; i++){
		objArr[i].iCur = parseInt(getStyle(objArr[i], attr))
		objArr[i].iSpeed += (objArr[i].iTarget-objArr[i].iCur)/window.timeSpan;
		objArr[i].iSpeed *= window.frictionFactor;
		var newCur = objArr[i].iCur + objArr[i].iSpeed;
		objArr[i].style[attr] = newCur + 'px';
	}
}

function getStyle(obj, attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj, false)[attr];	
	}
}
</script>
<body>

<div id="header">
    <h1 title="妙味课堂——带你享受极富人情味的IT培训体验"><a href="http://www.miaov.com/"><img src="images/logo.gif" alt="妙味课堂" longdesc="http://www.miaov.com/63.html" /></a></h1>
    <ul>
        <li class="normal"><a href="http://www.miaov.com/">首页</a></li>
        <li class="normal"><a href="http://www.miaov.com/course.html.php">妙味课程</a></li>
        <li class="normal"><a href="http://www.miaov.com/course.html.php">妙味资源</a></li>
        <li class="normal"><a href="http://www.miaov.com/message.html.php">留言</a></li>
        <li class="normal"><a href="http://blog.miaov.com/">妙味博客</a></li>
        <li class="normal"><a href="http://www.miaov.com/contact.html.php">联系妙味</a></li>
    </ul>
    <div id="btn_bg">
    	<ul>
	        <li class="active"><a href="http://www.miaov.com/">首页</a></li>
	        <li class="active"><a href="http://www.miaov.com/course.html.php">妙味课程</a></li>
	        <li class="active"><a href="http://www.miaov.com/course.html.php">妙味资源</a></li>
	        <li class="active"><a href="http://www.miaov.com/message.html.php">留言</a></li>
	        <li class="active"><a href="http://blog.miaov.com/">妙味博客</a></li>
	        <li class="active"><a href="http://www.miaov.com/contact.html.php">联系妙味</a></li>
	    </ul>
    </div>
</div>


</body>
</html>